<!DOCTYPE html>
<html>
  <head>
    <title>合同详情</title>	
    <meta name="viewport" content="initial-scale=1, maximum-scale=1">
    <meta name="keywords" content="keyword1,keyword2,keyword3">
    <meta name="description" content="this is my page">
    <meta name="content-type" content="text/html; charset=UTF-8">
	<meta charset="utf-8">
	<meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
  </head>
<link rel="stylesheet" href="./css/sm.css">
<link rel="stylesheet" href="./css/sm-extend.css">
<script src="../js/jquery-2.1.1.js"></script>
<script src="http://res.wx.qq.com/open/js/jweixin-1.2.0.js"></script>
<script src="../js/min/modernizr-custom-v2.7.1.min.js" type="text/javascript"></script>
<script src="../js/min/hammer-v2.0.3.min.js" type="text/javascript"></script>
<!-- 插件js -->
<script src="./js/zepto.js"></script>
<script src="./js/sm.js" ></script>
<script src="./js/sm-extend.js" ></script>
<script type="text/javascript">
	window.$$=window.Zepto = Zepto;
</script>
<body style="width: 100%">
	<div>
		<div  id="content" style="width: 210mm;margin: 50px auto; padding: 16mm 25mm; position: absolute; ">
			
		</div>
	</div>
	<div style="width: 100%;height: 100%;position: fixed;">
		<div id="signBtnDiv" style="bottom: 50px;width: 100%; height: 35px; position: fixed; text-align: center; display: none;" >
			<input type="submit" id="signBtn" value="签名" style="width: 100px; height: 35px; font-size: 16px;">
		</div>			
		<div id="signWrap" style="color: black;background: rgba(0,0,0,0.1);width: 100%;height: 100%;display: none; position: fixed;">
			<span onclick="closeSign()" style="color: white;font-size: 24px;padding: 5px 10px;float: right;">X</span>
			<div style="bottom: 50px;width: 100%; height: 35px; position: fixed; text-align: center;" >
				<input type="submit" onclick="saveSign()" value="确定" style="width: 100px; height: 35px; font-size: 16px;">&nbsp;&nbsp;&nbsp;
				<input type="submit" onclick="resetSign()" value="重置" style="width: 100px; height: 35px; font-size: 16px;">
			</div>
		</div>
	</div>


<script type="text/javascript" src="../js/jSignature-master/flashcanvas.js"></script>
<script src="../js/jSignature-master/jSignature.min.js"></script>
<script src="../js/common.js"></script>
<script type="text/javascript">
var agreementId = $.getUrlParam("agreementId");
var options = {
		defaultAction: 'drawIt',
		height:'100%',
		width:'100%',
		color:"#000",	//笔记颜色
		lineWidth: 1,			//笔宽
		'decor-color': '#fff'  //下划线颜色
		}
var $signature;
		
$(function() {

	initData( agreementId, function(ret){
		if(ret.status=='0'){
			$("#signBtnDiv").show();
			$("#signBtn").on("click",function(){
				initSign();
			});
		}
	});
	
});

//初始化合同详情
function initData(agreementId, callback){
	$$.showPreloader("加载中");
	$.ajax({
		url : "../agreement/getById.do",
		data : {
			agreementId : agreementId,
		},
		type : "GET",
		dataType : 'json',
		cache : false,
		success : function(ret){
			$$.hidePreloader();
			if(ret){
				$("#content").html( tranNull(ret.agreementContent) );
				if( callback && typeof callback == 'function' ){
					callback(ret);
				}
			}
		},
		error: function(){
			$$.hidePreloader();
			$$.toast("加载出错");
		}
	});
}


// 初始化画板
function initSign(){
	$('#signWrap').show();
	$("#signBtnDiv").hide();
	$signature = $("#signWrap").jSignature('init',options); 
	$("#signImg").after("________").remove();
}
// 重置画板
function resetSign(){
	$signature.jSignature('reset');
}
//关闭画板
function closeSign(){
	resetSign();                
    $('#signWrap').hide();
	$("#signBtnDiv").show();
}


//保存签名
function saveSign(){
	//获取签名dom
	var signTag = getSignTag();
	var top = $(signTag).position().top*100/$("#content").innerHeight();
	var left = $(signTag).position().left*100/$("#content").innerWidth();
	var width = $("#yz").width()*100/$("#content").innerWidth();
	var height = $("#yz").height()*100/$("#content").innerHeight();
	//获取图片数据 
	 var data = $signature.jSignature('getData', 'default');
	 var img = new Image();
	 img.src = data;
	 var html = $(signTag).html();
	 console.log(html);
	 html = html.replace(/乙方签名[:\s\S]_*/g, '乙方签名: <img id="signImg" src="'+img.src+'" style="width:100px; height:100px;" />');
	 
	 //签约时间
	 var nowDate = new Date();
	 html = html.replace(/签约时间[:\s\S]_*年_*月_*日/g, '签约时间:'+ nowDate.getFullYear() +' 年 '+ (nowDate.getMonth()*1+1) +' 月 '+ nowDate.getDate() +' 日' );
	 
	 
	 $(signTag).html( html );
	 $('#signWrap').hide();
	 //$("#signBtnDiv").hide();
	 
	
/* 	//获取数据 
	 var data = $signature.jSignature('getData', 'default')    
	 //图片展示
	 var img = new Image();
	 img.src = data;
	 $(img).css("height","5.78846%").css("width","16.6061%").css("top"," 92%").css("left","16.4698%").css("position","absolute");
	 $(img).appendTo($('#content'));
	 $('#signWrap').hide();
	 $("#signBtnDiv").hide();
/* 	 var datapair = $("#signature").jSignature("getData", "image");
     var i = new Image();
     i.src = "data:" + datapair[0] + "," + datapair[1];
     $(i).appendTo($("#content")); */ 

     //保存到数据库
     //doEdit();
}

//保存合同信息
function doEdit(){ 	
	var content = $("#content").html();
	$$.showPreloader("提交中");
 	$.ajax({
		url : "../agreement/editAgreementContent.do",
		data : {
			agreementId : agreementId,
			agreementContent : content,
			status : 1
		},
		type : "GET",
		dataType : 'json',
		cache : false,
		success : function(ret) {
			$$.hidePreloader();
			if (ret.resultCode == 0) {
				$$.toast(ret.msg);
				console.log("11111");

			}else{
				$$.toast(ret.msg);
			}
		},
		error: function(){
			$$.hidePreloader();
			$$.toast("提交出错");
		}
	}); 
}

// 获取乙方签名dom
function getSignTag(){
	var reg = new RegExp("乙方签名");
	var tagP ;
	$("#content p").each(function(i,p){
		var text = $(p).text();
		if( reg.test(text) ){
			console.log(text);
			tagP = p;
			return;
	    }
	});
	return tagP;
}

//获取乙方签名时间dom
function getSignDateTag(){
	var signReg = new RegExp("乙方签名");
	var dateReg = new RegExp("签名时间");
	var flag = false;
	var tagP ;
	$("#content p").each(function(i,p){
		var text = $(p).text();
		if( reg.test(text) ){
			console.log(text);
			tagP = p;
			return;
	    }
	});
	return tagP;
}


</script>
</body>
</html>
